<template>
    <div id="Recomm">
        <div class="w1224 clearfix">
			<!-- 推荐 -->
			<div class="flash-sale">
				<div class="flash-sale-title">

					<span data-text="热门推荐">热门推荐</span>
				</div>
				<div class="flash-sale-container">

				 <div class="flash-sale-item animate-scale fl">
						<a href="/Goods/goods/id/58195.html">
							<div class="goods-pic border-box">
								<img class="w-100" src="/Public/upload/goods/thumb/58195/goods_thumb_58195_180_180.jpg" alt="">
							</div>
						</a>
						<div class="goods-con border-box">
							<div class="goods-name border-box ellipsis-1">资生堂 姬芮Za新焕真皙美白隔离霜防晒SPF26妆前乳...</div>

							<a class="flash-sale-btn" href="/Goods/goods/id/58195.html">
								<span>查看详情</span>
								<!-- <span class="flash-sale-circle fr"><i class="layui-icon layui-icon-right"></i></span> -->
							</a>
						</div>
					</div>                   

				</div>
			</div>

			<!-- 广告图 -->
			<div class="adv">
				<a class="adv-left">
					<img class="w-100" :src="advImg" alt="">
				</a>
			</div>
		</div>
    </div>
</template>

<script>
export default {
    name:'Recomm',
    data(){
        return{
            advImg:require('@/assets/images/home/remm.jpg')
        }
    }
}
</script>

<style lang="scss" scoped>
.w1224 {
    width: 1224px;
    margin: 0 auto;
}
.flash-sale {
    width: 100%;
    position: relative;
}
.flash-sale-title {
    width: 240px;
    height: 24px;
    margin: 30px auto;
    position: relative;
    text-align: center;
    background: url(~@/assets/images/home/flash-sale-title.png) no-repeat;
}
.flash-sale-title>span {
    line-height: 24px;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    color: #4352bf;
}
.flash-sale-title>span:before {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    color: #00baff;
    -webkit-mask: -webkit-gradient(linear,left top,right top,from(red),to(rgba(0,0,0,0)));
    -webkit-mask: -webkit-linear-gradient(left,red,rgba(0,0,0,0));
    mask: -webkit-gradient(linear,left top,right top,from(red),to(rgba(0,0,0,0)));
    mask: linear-gradient(90deg,red,rgba(0,0,0,0));
}
.flash-sale-container {
    position: relative;
    overflow: hidden;
}
.flash-sale-item:first-child {
    margin-left: 0;
}
.flash-sale-item {
    width: 188px;
    height: 260px;
    background-color: #fff;
    position: relative;
    margin: 0 0 0 19px;
    overflow: hidden;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.flash-sale-item>a {
    display: block;
    width: 100%;
    height: 190px;
    background-color: #fff;
    position: relative;
}
.flash-sale-item .goods-con {
    width: 100%;
    height: 70px;
    padding: 5px 22px 0;
}
.flash-sale-item .goods-con .goods-name {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    position: relative;
    word-break: break-all;
    color: #444;
}
.flash-sale-item .goods-con .flash-sale-btn{
    display: block;
    width: 124px;
    height: 22px;
    line-height: 22px;
    background: #caccee;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 11px;
    margin: 10px auto 0;
}
</style>